/* You can add global styles to this file, and also import other style files */
@import '~material-design-icons/iconfont/material-icons.css';
@import "~@ledge-framework/render/prebuild-theme/index.css";

@import "styles/periodic-variables";

@import "styles/markdown";
@import "styles/markdown-render";
@import "styles/dragula";
@import "styles/behavior";
@import "styles/color";
@import "styles/material-ui";
@import "styles/mobile";
@import "styles/intro";

html, body {
  height: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-width: 1200px;
  width: auto;
  font-family: 'Chinese Quote', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji';
  font-size: 16px;
  margin: 0;
  background-color: $background-color;
}

@media screen and (min-width: 2501px) and (max-width: 4000px) {
  body {
    font-size: 20px;
  }
}

.spacer {
  flex: 1 1 auto;
}

.center {
  text-align: center;
}

.scroll-to-top {
  .mat-fab.mat-accent {
    background-color: $purple;
  }
}

.markdown {
  .ledge-checklist {
    label {
      font-size: 1em !important;
    }
  }

  .home-container {
    margin: 0 auto;
    max-width: 112.0rem;
    padding: 0 2.0rem;
    position: relative;
    width: 100%
  }
}

.home-markdown {
  .markdown {
    p {
      padding: 2em;
      text-align: center;
    }
  }

  .card {
    p {
      padding: 0;
      text-align: left;
    }
  }
}


.header {
  $themeColours: (
    0: #F37C20,
    1: #E9BD1E,
    2: #00A2A1,
    3: #0062CE,
    4: #666666,
    5: #DC5332,
    6: #079948,
    7: #999999,
    8: #800080,
    9: #003366,
    10: #AA217E,
    11: #55acee,
    12: #444444,
    13: #61bb46,
    14: #007C78
  );

  @each $i, $color in $themeColours {
    &.type_#{$i} {
      background: $color;
    }
    &.type_#{$i}:after {
      border-left: 22px solid $color;
    }
  }
}

.ledge-render {
  .table-step {
    .card-body {
      p {
        margin-bottom: 0 !important;
      }
    }
  }

  .flex-table {
    width: 100%;
    margin: 1em 0;
    display: flex;
    justify-content: center;
  }
}

.ledge-skilltree {
  .graphviz svg {
    height: 2048px;
  }
}
